<template>
	<div>
		<a-card :borderd="false" class="mb-2">
			<a-row :gutter="8">
				<a-col :span="2">
					<a-select v-model:value="config.listQuery.licenseId" style="width:100%" placeholder="请选择License"
							  allow-clear>
						<a-select-option v-for="item in config.licenseList" :key="item.id" :value="item.id">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-col>

				<a-col :span="12">
					<a-space>
						<a-button type="primary" @click="tableRef.refresh()">搜索
						</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-card>


		<a-card>
			<h-table :paged="true" ref="tableRef" :data="getList" :columns="columns">
			</h-table>
		</a-card>

		<a-modal v-model:open="config.dialogVisible" :destroyOnClose="true" :width="1000"
				 :footer="null">
			<div class="job-msg-div">{{ config.selectRow.msg }}</div>
			<div slot="footer" class="dialog-footer"></div>
		</a-modal>
	</div>
</template>

<script setup>
import clientConnectLogApi from '@/api/log/clientConnectLogApi.js'
import licenseApi from '@/api/license/licenseApi.js'
import reportApi from "@/api/report/reportApi";

const tableRef = ref();
const config = ref({

	tableKey: 0,
	list: null,
	total: null,
	listLoading: false,
	listQuery: {
		jobId: undefined
	},
	dialogVisible: false,
	selectRow: {},
	licenseList: []
})

const {proxy} = getCurrentInstance();
if (proxy.$route.query.userId) {
	config.value.listQuery.userId = proxy.$route.query.userId
}

const columns = ref([
	{
		title: '用户名',
		key: 'userName',
		dataIndex: 'userName',
		ellipsis: true,
	},
	{
		title: 'licenseName',
		key: 'licenseName',
		dataIndex: 'licenseName',
		ellipsis: true,
	},
	{
		title: 'IP',
		key: 'ip',
		dataIndex: 'ip',
		ellipsis: true,
	},
	{
		title: '类型',
		key: 'type',
		dataIndex: 'type',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: '连接'
			},
			{
				key: '2',
				value: '断开'
			}
		]
	},
	{
		title: '消息',
		key: 'msg',
		dataIndex: 'msg',
		ellipsis: true,
	},
	{
		title: '结果',
		key: 'code',
		dataIndex: 'code',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: '成功'
			},
			{
				key: '2',
				value: '失败'
			}
		]
	},
	{
		title: '异常信息',
		key: 'err',
		dataIndex: 'err',
		ellipsis: true,
	},
	{
		title: '发生时间',
		key: 'createTime',
		dataIndex: 'createTime',
		ellipsis: true,
	},
])
onMounted(() => {
	getLicenseList()
})

const getLicenseList = async () => {
	let response = await licenseApi.licenseList();
	config.value.licenseList = response
}
const getList = async (data) => {
	let response = await clientConnectLogApi.fetchList({
		...data,
		...config.value.listQuery
	});
	return response;
}
</script>

<style>
.job-msg-div {
	max-height: 400px;
	overflow-y: auto;
}
</style>
